<template>
	<div class="system-menu-dialog-container">
		<el-dialog :title="state.dialog.title" v-model="state.dialog.isShowDialog" :fullscreen="true">
            <el-descriptions
                title="企业详情"
                size="large"
                :column="3"
                border
            >
                <el-descriptions-item label-align="center">
                    <template #label>
                        公司名称
                    </template>
                    {{ state.ruleForm.name }}
                </el-descriptions-item>
                <el-descriptions-item label-align="center">
                    <template #label>
                        行业
                    </template>
                    {{ state.ruleForm.industry }}
                </el-descriptions-item>
                <el-descriptions-item label-align="center">
                    <template #label>
                        企业登记号
                    </template>
                    {{ state.ruleForm.registerNo }}
                </el-descriptions-item>
                <el-descriptions-item label-align="center">
                    <template #label>
                        注册地址
                    </template>
                    {{ state.ruleForm.registerAddress }}
                </el-descriptions-item>
                <el-descriptions-item label-align="center">
                    <template #label>
                        经营地址
                    </template>
                    {{ state.ruleForm.address }}
                </el-descriptions-item>
                <el-descriptions-item label-align="center">
                    <template #label>
                        联系人
                    </template>
                    {{ state.ruleForm.contacts }}
                </el-descriptions-item>
                <el-descriptions-item label-align="center">
                    <template #label>
                        联系电话
                    </template>
                    {{ state.ruleForm.phone }}
                </el-descriptions-item>
                <el-descriptions-item label-align="center">
                    <template #label>
                        邮箱
                    </template>
                    {{ state.ruleForm.email }}
                </el-descriptions-item>
                <el-descriptions-item label-align="center">
                    <template #label>
                        法人
                    </template>
                    {{ state.ruleForm.legalPerson }}
                </el-descriptions-item>
                <el-descriptions-item label-align="center">
                    <template #label>
                        实控人
                    </template>
                    {{ state.ruleForm.actualController }}
                </el-descriptions-item>
                <el-descriptions-item label-align="center">
                    <template #label>
                        注册资本
                    </template>
                    {{ state.ruleForm.registerCapital }}
                </el-descriptions-item>
                <el-descriptions-item label-align="center">
                    <template #label>
                        实缴资本
                    </template>
                    {{ state.ruleForm.paidInCapital }}
                </el-descriptions-item>
                <el-descriptions-item label-align="center">
                    <template #label>
                        是否破产
                    </template>
                    <el-icon color="green" v-if="state.ruleForm.isBankruptcy == 1"><Select /></el-icon>
                    <el-icon color="red" v-else><CloseBold /></el-icon>
                </el-descriptions-item>
                <el-descriptions-item label-align="center">
                    <template #label>
                        是否限高
                    </template>
                    <el-icon color="green" v-if="state.ruleForm.heightLimit == 1"><Select /></el-icon>
                    <el-icon color="red" v-else><CloseBold /></el-icon>
                </el-descriptions-item>
                <el-descriptions-item label-align="center">
                    <template #label>
                        失信情况
                    </template>
                    <el-icon color="green" v-if="state.ruleForm.dishonesty == 1"><Select /></el-icon>
                    <el-icon color="red" v-else><CloseBold /></el-icon>
                </el-descriptions-item>
            </el-descriptions>
            <el-descriptions
                size="large"
                style="margin-top: 10px"
                :column="1"
                direction="vertical"
                border
            >
                <el-descriptions-item label-align="center" class-name="description-table" >
                    <template #label>
                        违法行为线索
                    </template>
                    <Offence  ref="offenceRef"/>
                </el-descriptions-item>
            </el-descriptions>
            <el-descriptions
                size="large"
                style="margin-top: 10px"
                :column="1"
                direction="vertical"
                border
            >
                <el-descriptions-item label-align="center" class-name="description-table" >
                    <template #label>
                        财产线索
                    </template>
                    <el-tabs v-model="activeName" class="demo-tabs" >
                        <el-tab-pane label="银行账户" name="bank">
                            <Bank  ref="bankRef" :key="state.dateKey" :linkType="0" :linkId="state.ruleForm.id"/>
                        </el-tab-pane>
                        <el-tab-pane label="不动产" name="realestate">
                            <Realestate  ref="realestateRef"/>
                        </el-tab-pane>
                        <el-tab-pane label="车辆/船舶" name="car">
                            <Car  ref="carRef"/>
                        </el-tab-pane>
                        <el-tab-pane label="其他动产" name="movables">
                           <Movables ref="movablesRef"/>
                        </el-tab-pane>
                        <el-tab-pane label="股权/合伙份额" name="shareholding">
                            <Shareholding ref="shareholdingRef"/>
                        </el-tab-pane>
                        <el-tab-pane label="其他金融资产" name="stock">
                            <Stock ref="stockRef"/>
                        </el-tab-pane>
                        <el-tab-pane label="债券" name="Bond">
                            <Bond ref="bondRef"/>
                        </el-tab-pane>
                        <el-tab-pane label="担保" name="security">
                            <Security ref="securityRef"/> 
                        </el-tab-pane>
                        <el-tab-pane label="商标" name="trademark">
                            <Trademark ref="trademarkRef"/>
                        </el-tab-pane>
                        <el-tab-pane label="专利" name="patent">
                            <Patent ref="patentRef"/>
                        </el-tab-pane>
                        <el-tab-pane label="作品著作权" name="works">
                            <Works ref="worksRef"/>
                        </el-tab-pane>
                        <el-tab-pane label="软件著作权" name="software">
                            <Software ref="softwareRef"/>
                        </el-tab-pane>
                        <el-tab-pane label="域名" name="domain">
                            <Domain ref="domainRef"/>
                        </el-tab-pane>
                    </el-tabs>
                </el-descriptions-item>
            </el-descriptions>
			<template #footer>
				<span class="dialog-footer">
					<el-button type="primary" @click="onCancel" size="default">关闭</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="cgcompanyForm">
import { reactive, defineAsyncComponent,onMounted, ref ,unref,nextTick, defineProps } from 'vue';
import { CloseBold,Select } from '@element-plus/icons-vue'
import { getinfo,save } from '/@/api/cgcompany/index';
import {  ElMessage } from 'element-plus';
const Offence = defineAsyncComponent(() => import('/@/views/cogen/cgoffence/offence.vue'));
const Bank = defineAsyncComponent(() => import('/@/views/cogen/cgbank/bank.vue'));
const Realestate = defineAsyncComponent(() => import('/@/views/cogen/cgrealestate/realestate.vue'));
const Car = defineAsyncComponent(() => import('/@/views/cogen/cgcar/car.vue'));
const Movables = defineAsyncComponent(() => import('/@/views/cogen/cgmovables/movables.vue'));
const Shareholding = defineAsyncComponent(() => import('/@/views/cogen/cgshareholding/shareholding.vue'));
const Stock = defineAsyncComponent(() => import('/@/views/cogen/cgstock/stock.vue'));
const Bond = defineAsyncComponent(() => import('/@/views/cogen/cgbond/bond.vue'));
const Security = defineAsyncComponent(() => import('/@/views/cogen/cgsecurity/security.vue'));
const Trademark = defineAsyncComponent(() => import('/@/views/cogen/cgtrademark/trademark.vue'));
const Patent = defineAsyncComponent(() => import('/@/views/cogen/cgpatent/patent.vue'));
const Works = defineAsyncComponent(() => import('/@/views/cogen/cgworks/works.vue'));
const Software = defineAsyncComponent(() => import('/@/views/cogen/cgsoftware/software.vue'));
const Domain = defineAsyncComponent(() => import('/@/views/cogen/cgdomain/domain.vue'));

// 定义子组件向父组件传值/事件
const emit = defineEmits(['refresh']);
// 定义变量内容
const activeName = ref('bank');
const dialogFormRef = ref();
const state = reactive({
	ruleForm: {
        name:'',
        industry:'',
        registerNo:'',
        registerAddress:'',
        address:'',
        contacts:'',
        phone:'',
        email:'',
        legalPerson:'',
        actualController:'',
        registerCapital:'',
        paidInCapital:'',
        isBankruptcy:'',
        heightLimit:'',
        dishonesty:'',
        id:'',
    },
    dateKey: Date.now(),
	dialog: {
		isShowDialog: false,
		type: '',
		title: '',
		submitTxt: '',
	},
	// 表单校验
	ruleRules:  { 
    name: [{ required: true, message: '企业名称不能为空', trigger: 'blur' }],
  },
	loading: false,
	msg:'最佳尺寸100*100',
});


const onUpload = (data) => {
	state.ruleForm.img = data;
};

const onUploadvedio = (data) => {
	state.ruleForm.video = data;
};

// 打开弹窗
const openDialog = (type: string, row?: any) => {
		// 实际请走接口
    state.ruleForm.id = row.id;
    getinfo(row.id).then((response: any) => {
        state.ruleForm.name = response.data.name;
        state.ruleForm.industry = response.data.industry;
        state.ruleForm.registerNo = response.data.registerNo;
        state.ruleForm.registerAddress = response.data.registerAddress;
        state.ruleForm.address = response.data.address;
        state.ruleForm.contacts = response.data.contacts;
        state.ruleForm.phone = response.data.phone;
        state.ruleForm.email = response.data.email;
        state.ruleForm.legalPerson = response.data.legalPerson;
        state.ruleForm.actualController = response.data.actualController;
        state.ruleForm.registerCapital = response.data.registerCapital;
        state.ruleForm.paidInCapital = response.data.paidInCapital;
        state.ruleForm.isBankruptcy = response.data.isBankruptcy;
        state.ruleForm.heightLimit = response.data.heightLimit;
        state.ruleForm.dishonesty = response.data.dishonesty;
    });
	state.dialog.type = type;
	state.dialog.isShowDialog = true;
	// 查询
	state.dateKey = Date.now();
};
// 关闭弹窗
const closeDialog = () => {
	initForm();
	state.dialog.isShowDialog = false;
};

// 取消
const onCancel = () => {
	closeDialog();
};
// 提交
const onSubmit = () => {

	const formWrap = unref(dialogFormRef) as any;
	if (!formWrap) return;
	formWrap.validate((valid: boolean) => {
		if (valid) {
			state.loading = true;
			save(state.ruleForm)
				.then(() => {
					ElMessage.success('保存成功');
					state.loading = false;
					closeDialog(); // 关闭弹窗
					emit('refresh');
				})
				.finally(() => {
					state.loading = false;
				});
		}
	})
};
// 页面加载时
onMounted(() => {
	
});


// 表单初始化，方法：`resetFields()` 无法使用
const initForm = () => {
	state.ruleForm.name = '';
    state.ruleForm.industry = '';
    state.ruleForm.registerNo = '';
    state.ruleForm.registerAddress = '';
    state.ruleForm.address = '';
    state.ruleForm.contacts = '';
    state.ruleForm.phone = '';
    state.ruleForm.email = '';
    state.ruleForm.legalPerson = '';
    state.ruleForm.actualController = '';
    state.ruleForm.registerCapital = '';
    state.ruleForm.paidInCapital = '';
    state.ruleForm.isBankruptcy = '';
    state.ruleForm.heightLimit = '';
    state.ruleForm.dishonesty = '';
    state.ruleForm.id = '';
};

// 暴露变量
defineExpose({
	openDialog,
});
</script>

<style>
.el-tabs__nav-wrap {
 padding-left: 15px !important;
 padding-top: 15px !important;
}
.el-tabs__header {
    margin-top: 0px;
    margin-bottom: 0px;
}
.el-overlay .el-overlay-dialog .el-dialog .el-dialog__body {
    max-height: 90% !important;
}
.description-table {
    padding: 0 !important;
}
.el-descriptions--large .el-descriptions__body .el-descriptions__table .el-descriptions__cell {
    font-size: 15px !important;
}
.el-descriptions--large .el-descriptions__body .el-descriptions__table.is-bordered .el-descriptions__cell {
    padding:15px;
}
.el-descriptions__label.el-descriptions__cell.is-bordered-label {
    background: rgba(24, 144, 255, 0.1);
}
.el-descriptions {
    --el-descriptions-table-border: 1px solid rgba(24, 144, 255, 0.1)
}
</style>